<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" type="text/css" href="normalize.css">
    <link rel="stylesheet" type="text/css" href="libs/glide/glide.core.min.css">
    <link rel="stylesheet" type="text/css" href="libs/glide/glide.theme.min.css">
    <link rel="stylesheet" href="style.css">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.13.1/css/all.css" rel="stylesheet">
</head>

<body>
    <!-- 头部-导航 -->
    <header id="header">
        <!-- logo -->
        <div class="logo">
            第七范式信息科技
        </div>
        <!-- 导航菜单 -->
        <nav>
            <a href="#home">首页</a>
            <a href="#about-us">关于我们</a>
            <a href="#showcases">成功案例</a>
            <a href="#service">服务流程</a>
            <a href="#team-intro">团队介绍</a>
            <a href="#company-activities">公司动态</a>
            <i class="fas fa-search"></i>
        </nav>
        <!-- 折叠导航按钮 -->
        <div class="burger">
            <div class="burger-line1"></div>
            <div class="burger-line2"></div>
            <div class="burger-line3"></div>
        </div>
    </header>
    <!-- 轮播区域 -->
    <div id="home" class="glide">
        <div class="glide__track" data-glide-el="track">
            <ul class="glide__slides">
                <li class="glide__slide">
                    <div class="slide-caption">
                        <h1>用创新点缀人生,让科技融入理想</h1>
                        <h3>科技创新大平台,指挥生活新引擎,依靠科技进步推进经济跨越式发展,用创新点缀人生,让科技融入理想.</h3>
                        <button class="explore-btn">探索更多</button>
                    </div>
                    <!-- 遮罩层 -->
                    <div class="backdorp"></div>
                    <img src="images/people-in-couch-1024248.jpg" alt="">
                </li>
                <li class="glide__slide">
                    <div class="slide-caption">
                        <h1>科技改变世界</h1>
                        <h3>立足科学发展,着力自主创新,加速科技进步,为全市经济社会发展提供强有力的支撑.凝聚科技创意,成就创新梦想</h3>
                        <button class="explore-btn">探索更多</button>
                    </div>
                    <!-- 遮罩层 -->
                    <div class="backdorp"></div>
                    <video src="videos/working-man.mp4" muted autoplay loop></video>
                </li>
            </ul>
            <div class="glide__arrows" data-glide-el="controls">
                <button class="glide__arrow glide__arrow--left" data-glide-dir="<">
                    <i class="fa fa-angle-left"></i>
                </button>
                <button class="glide__arrow glide__arrow--right" data-glide-dir=">">
                    <i class="fa fa-angle-right"></i>
                </button>
                <div class="glide__bullets" data-glide-el="controls[nav]">
                    <button class="glide__bullet" data-glide-dir="=0"></button>
                    <button class="glide__bullet" data-glide-dir="=1"></button>
                </div>
            </div>
        </div>
    </div>
    <div class="content-wrapper">
        <section id="about-us" class="about-us">
            <h2 class="title">关于我们</h2>
            <!-- 引子 -->
            <p class="intro">
                网络公司不仅仅提供域名注册,空间租用,网站开发,网站建设与网络营销活动策划相关的企业组织
            </p>
            <div class="features">
                <div class="feature">
                    <i class="fas fa-lightbulb"></i>
                    <h4 class="feature-title">品牌创意</h4>
                    <p class="feature-content">
                        为企业设计独特的并能完美呈现企业价值观的视觉。
                    </p>
                </div>
                <div class="feature">
                    <i class="fas fa-chart-line"></i>
                    <h4 class="feature-title">整合营销</h4>
                    <p class="feature-content">
                        通过市场进入分析，指定网络营销战略，网络营销实施。
                    </p>
                </div>
                <div class="feature">
                    <i class="fas fa-shopping-cart"></i>
                    <h4 class="feature-title">电子商务</h4>
                    <p class="feature-content">
                        根据企业需求，开发不同的销售渠道，通过网上直销
                    </p>
                </div>
                <div class="feature">
                    <i class="fas fa-desktop"></i>
                    <h4 class="feature-title">网页设计</h4>
                    <p class="feature-content">
                        通过网站建设，智能建站，域名主机，企业邮箱
                    </p>
                </div>
                <div class="feature">
                    <i class="fas fa-tachometer-alt"></i>
                    <h4 class="feature-title">网站优化</h4>
                    <p class="feature-content">
                        网站推广是指将网站推广到国内各大知名网站和搜索引擎
                    </p>
                </div>
                <div class="feature">
                    <i class="fas fa-server"></i>
                    <h4 class="feature-title">网站架设</h4>
                    <p class="feature-content">
                        通过绑定域名和服务器，把网站展现给全世界。
                    </p>
                </div>
            </div>
        </section>
        <section id="showcases" class="showcases section-bg">
            <div class="title">
                成功案例
            </div>
            <div class="filter-btns">
                <button class="filter-btn active" data-filter="*">全部</button>
                <button class="filter-btn" data-filter=".web">WEB</button>
                <button class="filter-btn" data-filter=".mobile">移动</button>
                <button class="filter-btn" data-filter=".science">科研</button>
            </div>
            <div class="cases">
                <div class="case-item web science">
                    <img src="images/gray-laptop-computer-showing-html-codes-in-shallow-focus-160107.jpg" alt="">
                </div>
                <div class="case-item web science">
                    <img src="images/gray-laptop-computer-showing-html-codes-in-shallow-focus-160107.jpg" alt="">
                </div>
                <div class="case-item web science">
                    <img src="images/gray-laptop-computer-showing-html-codes-in-shallow-focus-160107.jpg" alt="">
                </div>
                <div class="case-item mobile">
                    <img src="images/gray-laptop-computer-showing-html-codes-in-shallow-focus-160107.jpg" alt="">
                </div>
                <div class="case-item mobile">
                    <img src="images/gray-laptop-computer-showing-html-codes-in-shallow-focus-160107.jpg" alt="">
                </div>
                <div class="case-item mobile">
                    <img src="images/gray-laptop-computer-showing-html-codes-in-shallow-focus-160107.jpg" alt="">
                </div>
                <div class="case-item mobile">
                    <img src="images/gray-laptop-computer-showing-html-codes-in-shallow-focus-160107.jpg" alt="">
                </div>
                <div class="case-item mobile">
                    <img src="images/gray-laptop-computer-showing-html-codes-in-shallow-focus-160107.jpg" alt="">
                </div>
            </div>
        </section>
        <section id="service" class="service">
            <h2 class="title">服务流程</h2>
            <p class="intro">
                网络综合公司,提供包括网络基础服务 (如域名,主机,邮箱) 和网络增值服务 (如网络推广,网站优化)等业务
            </p>
            <div class="services">
                <div class="service-item">
                    <i class="fas fa-comments"></i>
                    <h4 class="service-title">需求沟通</h4>
                    <p class="service-content">
                        客户提出网站建设基本需求，包括设计要求及功能要求。
                    </p>
                </div>
                <div class="service-item">
                    <i class="fas fa-sign-in-alt"></i>
                    <h4 class="service-title">项目评估</h4>
                    <p class="service-content">
                        根据客户提出的需求进行评估，估算出相应的时间与费用。
                    </p>
                </div>
                <div class="service-item">
                    <i class="fas fa-file-signature    "></i>
                    <h4 class="service-title">签订合同</h4>
                    <p class="service-content">
                        合作双方确认费用，工期，合作要求的基础上，双方共同签订合同。
                    </p>
                </div>
                <div class="service-item">
                    <i class="fas fa-user"></i>
                    <h4 class="service-title">提案阶段</h4>
                    <p class="service-content">
                        完成网站初稿设计，包括首页风格，内页风格页面。
                    </p>
                </div>
                <div class="service-item">
                    <i class="fas fa-chalkboard-teacher"></i>
                    <h4 class="service-title">制作阶段</h4>
                    <p class="service-content">
                        完成所有网页的设计，进行程序开发以及前后台的页面整合。
                    </p>
                </div>
                <div class="service-item">
                    <i class="fas fa-user-check"></i>
                    <h4 class="service-title">网站验收</h4>
                    <p class="service-content">
                        根据合同条款进行网站验收，并签署网站验收确认单。
                    </p>
                </div>
            </div>
        </section>
        <section id="team-intro" class="team-intro section-bg">
            <h2 class="title">团队介绍</h2>
            <div class="team-members">
                <div class="team-member">
                    <div class="profile-image">
                        <img src="images/selective-focus-photograph-of-man-wearing-gray-suit-jacket-1138903.jpg" alt="">
                    </div>
                    <h4 class="name">凌端俊</h4>
                    <p class="position">服务端架构师</p>
                    <ul class="social-links">
                        <li>
                            <i class="fab fa-weixin"></i>
                        </li>
                        <li>
                            <i class="fab fa-weibo"></i>
                        </li>
                        <li>
                            <i class="fab fa-github"></i>
                        </li>
                        <li>
                            <i class="fab fa-linkedin"></i>
                        </li>
                    </ul>
                </div>
                <div class="team-member">
                    <div class="profile-image">
                        <img src="images/selective-focus-photograph-of-man-wearing-gray-suit-jacket-1138903.jpg" alt="">
                    </div>
                    <h4 class="name">王超</h4>
                    <p class="position">Java工程师</p>
                    <ul class="social-links">
                        <li>
                            <i class="fab fa-weixin"></i>
                        </li>
                        <li>
                            <i class="fab fa-weibo"></i>
                        </li>
                        <li>
                            <i class="fab fa-github"></i>
                        </li>
                        <li>
                            <i class="fab fa-linkedin"></i>
                        </li>
                    </ul>
                </div>
                <div class="team-member">
                    <div class="profile-image">
                        <img src="images/selective-focus-photograph-of-man-wearing-gray-suit-jacket-1138903.jpg" alt="">
                    </div>
                    <h4 class="name">彭东</h4>
                    <p class="position">UI设计师</p>
                    <ul class="social-links">
                        <li>
                            <i class="fab fa-weixin"></i>
                        </li>
                        <li>
                            <i class="fab fa-weibo"></i>
                        </li>
                        <li>
                            <i class="fab fa-github"></i>
                        </li>
                        <li>
                            <i class="fab fa-linkedin"></i>
                        </li>
                    </ul>
                </div>
                <div class="team-member">
                    <div class="profile-image">
                        <img src="images/selective-focus-photograph-of-man-wearing-gray-suit-jacket-1138903.jpg" alt="">
                    </div>
                    <h4 class="name">孙宇传</h4>
                    <p class="position">产品运营</p>
                    <ul class="social-links">
                        <li>
                            <a href="#"><i class="fab fa-weixin"></i></a>
                        </li>
                        <li>
                            <a href="#"><i class="fab fa-weibo"></i></a>
                        </li>
                        <li>
                            <a href="#"><i class="fab fa-github"></i></a>
                        </li>
                        <li>
                            <a href="#"><i class="fab fa-linkedin"></i></a>
                        </li>
                    </ul>
                </div>
            </div>
        </section>
        <section class="data-section rellax">
            <div class="data-piece">
                <i class="fas fa-code"></i>
                <div class="num">
                    12000
                </div>
                <div class="data-desc">
                    行代码
                </div>
            </div>
            <div class="data-piece">
                <i class="fas fa-award"></i>
                <div class="num">
                    200
                </div>
                <div class="data-desc">
                    个奖项
                </div>
            </div>
            <div class="data-piece">
                <i class="fas fa-laugh-wink"></i>
                <div class="num">
                    200
                </div>
                <div class="data-desc">
                    位客户
                </div>
            </div>
            <div class="data-piece">
                <i class="fas fa-folder"></i>
                <div class="num">
                    100
                </div>
                <div class="data-desc">
                    个项目
                </div>
            </div>
        </section>
        <section id="company-activities" class="company-activities">
            <h2 class="title">公司动态</h2>
            <p class="intro">
                关注公司动态,第一时间获取第一手消息
            </p>
            <div class="activities">
                <div class="activity">
                    <div class="act-image-wrapper">
                        <img src="images/activity01-image.jpg" alt="">
                    </div>
                    <div class="meta">
                        <p class="date-published">
                            <i class="fa fa-calendar"></i> 2019年12月1日
                        </p>
                        <p class="comments">
                            <i class="far fa-comments"></i> 33条评论
                        </p>
                    </div>
                    <h2 class="act-title">
                        提供互联网接入的ISP公司
                    </h2>
                    <article>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                    </article>
                    <button class="read-more-btn">阅读更多</button>
                </div>
                <div class="activity">
                    <div class="act-image-wrapper">
                        <img src="images/activity01-image.jpg" alt="">
                    </div>
                    <div class="meta">
                        <p class="date-published">
                            <i class="fa fa-calendar"></i> 2019年12月1日
                        </p>
                        <p class="comments">
                            <i class="far fa-comments"></i> 33条评论
                        </p>
                    </div>
                    <h2 class="act-title">
                        提供互联网接入的ISP公司
                    </h2>
                    <article>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                    </article>
                    <button class="read-more-btn">阅读更多</button>
                </div>
                <div class="activity">
                    <div class="act-image-wrapper">
                        <img src="images/activity01-image.jpg" alt="">
                    </div>
                    <div class="meta">
                        <p class="date-published">
                            <i class="fa fa-calendar"></i> 2019年12月1日
                        </p>
                        <p class="comments">
                            <i class="far fa-comments"></i> 33条评论
                        </p>
                    </div>
                    <h2 class="act-title">
                        提供互联网接入的ISP公司
                    </h2>
                    <article>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                    </article>
                    <button class="read-more-btn">阅读更多</button>
                </div>
            </div>
        </section>
    </div>
    <footer>
        <div class="footer-menus">
            <div class="contact-us">
                <p class="menu-title">
                    联系我们
                </p>
                <p>地址: 河南省郑州市金水区南阳路219号</p>
                <p>电话: +86: 13262271065</p>
                <p>传真: +86: 18203760616</p>
                <p>电子邮箱: 1107160410@qq.com</p>
            </div>
            <div class="service-menu footer-menu">
                <p class="menu-title">服务概览</p>
                <ul class="menu-items">
                    <li><a href="#">网站建设</a></li>
                    <li><a href="#">域名购买</a></li>
                    <li><a href="#">网页设计</a></li>
                    <li><a href="#">移动应用</a></li>
                </ul>
            </div>
            <div class="service-menu footer-menu">
                <p class="menu-title">服务概览</p>
                <ul class="menu-items">
                    <li><a href="#">网站建设</a></li>
                    <li><a href="#">域名购买</a></li>
                    <li><a href="#">网页设计</a></li>
                    <li><a href="#">移动应用</a></li>
                </ul>
            </div>
            <div class="service-menu footer-menu">
                <p class="menu-title">服务概览</p>
                <ul class="menu-items">
                    <li><a href="#">网站建设</a></li>
                    <li><a href="#">域名购买</a></li>
                    <li><a href="#">网页设计</a></li>
                    <li><a href="#">移动应用</a></li>
                </ul>
            </div>
            <div class="service-menu footer-menu">
                <p class="menu-title">服务概览</p>
                <ul class="menu-items">
                    <li><a href="#">网站建设</a></li>
                    <li><a href="#">域名购买</a></li>
                    <li><a href="#">网页设计</a></li>
                    <li><a href="#">移动应用</a></li>
                </ul>
            </div>
            <p class="icp-info">
                备案号：<a href="http://beian.miit.gov.cn/" style="color: white;">豫ICP备 2020028571号-1</a>
            </p>
            <p class="rights">
                &copy: 2020 河南第七范式信息科技有限公司官网 版权所有
            </p>
            <div class="scrollToTop">
                <a href="#home">
                    <i class="fas fa-chevron-up"></i>
                </a>
            </div>
        </div>
    </footer>
    <script type="text/javascript" src="libs/scrollReveal/scrollreveal.min.js"></script>
    <script type="text/javascript" src="libs/isotope/isotope.pkgd.min.js"></script>
    <script type="text/javascript" src="libs/anime/anime.min.js"></script>
    <script type="text/javascript" src="libs/glide/glide.min.js"></script>
    <script type="text/javascript" src="libs/smooth-scroll/smooth-scroll.polyfills.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript" src="index.js"></script>
</body>

</html>